<template>
  <div class="details">
    <!-- 固定定位头部 -->
    <reader-return></reader-return>
    <!-- 头部组件放这里-->
    <details-header :name="name" :banner="banner" :gallery="gallery"></details-header>
    <!-- 详情页面导航栏 -->
    <detail-dhl :list="navlist" :reservelist="reservelist"></detail-dhl>
    <!-- 预定票组件 -->
    <!-- 评论组件 -->
    <comment></comment>
  </div>
</template>

<script>
import axios from 'axios' // 直接在Home组件中，获取一次性所以数据 提高效率 节约服务器资源
import DetailsHeader from './components/Header.vue'
import DetailDhl from './components/DetailDhl.vue'
import ReaderReturn from './components/ReaderReturn.vue'
import Comment from './components/Comment.vue'
export default {
  name: 'detail',
  components: {/* 注册组件 */
    DetailsHeader,
    DetailDhl,
    ReaderReturn,
    Comment
  },
  data () {
    return {
      navlist: [],
      gallery: [],
      banner: '',
      name: '',
      reservelist: []
    }
  },
  methods: {
    homeinfo () {
      axios.get('localdata/details.json')
        .then((res) => {
          this.chenggong(res)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    chenggong (res) {
      let dataObj = res.data // json中的所以数据
      let dataList = dataObj.data // 保存到列表数据
      if (dataObj.ret && dataList) { // 如果后台处理成功 并且列表数据有值，才能相关的数据操作
        // console.log(dataList.swiperlist)
        this.navlist = dataList.Nav
        this.name = dataList.sightName
        this.banner = dataList.bannerImg
        this.gallery = dataList.balleryImgs
        this.reservelist = dataList.ticketList
      }
    }
  },
  mounted () {
    this.homeinfo()
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .details
   background-color #f3f3f3
</style>
